<template>
	<view class="mapcenter">
		<map class="map" :latitude="mapval.latitude" :longitude="mapval.longitude"  
		:markers="mapval.markers" @regionchange="handleRegionChange"
		:show-location="true"
		></map>
		<!-- 点击定位的图标 -->
		<view class="mapicon" @tap="onpositioning">
			<image class="img1" src="../../static/images/dwmap.png"></image>
		</view>
		<!-- 下面的详情页面 -->
		<view class="illustrate">
			<view class="tit">我的位置<span class="span1">（滑动地图可更改位置）</span></view>
			<view class="adress">{{ mapval.formatted_address }}</view>
			<view class="sbmit" @tap="torelease">确定</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,onBeforeMount,onMounted,watchEffect} from 'vue'
	import areaData from '../../static/js/area-data1'
	import {onGotApiData,addClick} from '../../util/api.js'

	onBeforeMount(()=>{
		console.log('进入页面执行',mapval)
		// 获取位置
		onpositioning()
		// reonpositioning()
	})
// 弹框地图相关内容
const mapval = reactive({
	formatted_address:'',   // 详细地址
	id:0, // 使用 marker点击事件 需要填写id
	title: 'map',
	latitude: 31.249571, 
	longitude: 121.45575, 
	scale: 16,
	markers: [
        {
          id: 1,
          latitude: 31.249571, // 初始Marker的纬度
          longitude: 121.45575, // 初始Marker的经度
          iconPath: '../../static/images/mapmarker.png', // 自定义Marker图标路径
          width: 32, // Marker图标宽度
          height: 32, // Marker图标高度
		//   anchor:{x:5, y: 1}
        },
      ],
	})
const handleRegionChange = (e) => {
	console.log('滑动屏幕取到的经纬度11',e.detail)
	if(e.detail.type === "end"){
	      // 获取地图中心点坐标
      const { latitude, longitude } = e.detail.centerLocation;
      
    //   更新Marker位置
      mapval.markers[0].latitude = latitude;
      mapval.markers[0].longitude = longitude;
      // 更新data中的经纬度
      mapval.latitude = latitude;
      mapval.longitude = longitude;
		// 在这里可以根据获取到的定位信息进行相应的处理
		map(latitude,longitude)
		// 将经纬度缓存
		uni.setStorageSync('longitude',JSON.stringify(longitude))
		uni.setStorageSync('latitude', JSON.stringify(latitude))
	}
}
// 点击定位
const onpositioning = () =>{
	uni.getLocation({
		type: 'gcj02',
		success: function(res) {
			const latitude = res.latitude; // 纬度
			const longitude = res.longitude; // 经度
			const speed = res.speed; // 速度
			const accuracy = res.accuracy; // 精确度
			console.log("经度",longitude)
			console.log("纬度",latitude)
			// 在这里可以根据获取到的定位信息进行相应的处理
			map(latitude,longitude)
			// 将经纬度缓存
			uni.setStorageSync('longitude',JSON.stringify(longitude))
			uni.setStorageSync('latitude', JSON.stringify(latitude))
			mapval.longitude = longitude
			mapval.latitude = latitude
			mapval.markers[0].longitude = longitude
			mapval.markers[0].latitude = latitude
		},
		fail: function(err) {
			console.log('获取定位失败', err);
			reonpositioning()
		}
	});
}
const map = (latitude,longitude) => {
	const map_value = '' + longitude + ',' + latitude
	wx.request({
          url: 'https://restapi.amap.com/v3/geocode/regeo',
          data: {
            key: '451154cadc4be870a83b630263c9468a',
            location: map_value
          },
          success: (res) => {
			const address = res.data.regeocode.formatted_address;
            console.log("首页定位地图返回的全部",res);
			console.log("地图返回的地址",address);
			uni.setStorageSync('formatted_address',address)
			mapval.formatted_address = address
				// 省市区（为了传给发布页）
			let province = res.data.regeocode.addressComponent.province
			let city = res.data.regeocode.addressComponent.city
			// 直辖市的情况
			if(res.data.regeocode.addressComponent.province == "重庆市" || res.data.regeocode.addressComponent.province == "北京市"|| res.data.regeocode.addressComponent.province =="上海市"|| res.data.regeocode.addressComponent.province == "天津市"){
				city = res.data.regeocode.addressComponent.province
			}
			// 获取到的区，下面也有
			let district = res.data.regeocode.addressComponent.district

			console.log("地图返回的地址",res.data.regeocode.addressComponent.district);
			if(res.data.regeocode.addressComponent.district == []|| res.data.regeocode.addressComponent.district == ''){
				district = res.data.regeocode.addressComponent.township
			
			}
			// 做缓存发布时候用
			uni.setStorageSync('province', province);
			uni.setStorageSync('city', city);
			uni.setStorageSync('district',district);
          }
        }); 
	}
	// 跳转到信息发布页面
	const torelease = () =>{
		uni.navigateBack({
			delta: 1
		});
	}
	// 重新吊起
	const reonpositioning = () =>{
		        // 在这里重新吊起授权框
		navigator.geolocation.getCurrentPosition(
          function(position) {
            // 用户重新授权成功，获取位置信息
			console.log('重新授权成功',position)
					// 获取位置
			onpositioning()
          },
          function(error) {
            // 用户仍然拒绝位置权限
			console.log('重新授权失败',error)
          }
        );
	}
</script>

<style lang="scss">
// 地图相关样式
.mapcenter{
	min-height: 100vh;
	width: 100vw;
	max-width: 750rpx;
	margin: 0 auto;
	overflow: hidden;
	background-color: rgb(236, 234, 234);
	font-family: '思源黑体';
	width: 750rpx auto;
	position: relative;
	.map{
		width: 750rpx;
		height: 1000rpx;
	}
	.mapicon{
		width: 70rpx;
		height: 70rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		top: 900rpx;
		left: 650rpx;
		.img1{
			width: 48rpx;
			height: 48rpx;
			margin: 11rpx;
		}
	}
	.illustrate{
		width: 750rpx;
		height: calc(100vh - 1000rpx);
		background-color: rgba(245, 245, 245, 1);
		.tit{
			width: 700rpx;
			height: 60rpx;
			margin: 0 auto;
			border-radius: 10rpx 10rpx 0 0;
			padding-top: 20rpx;
			font-size: 40rpx;
			line-height: 50rpx;
			font-weight: 600;
			color: #000;
			.span1{
				font-size: 30rpx;
				line-height: 50rpx;
				font-weight: 400;
				color: rgba(212, 48, 48, 1);
			}
		}
		.adress{
			width: 700rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			// background-color: pink;
			font-size: 30rpx;
			line-height: 50rpx;
			font-weight: 400;
			color: rgb(10,10,10);
		}
		.sbmit{
			width: 640rpx;
			height: 80rpx;
			margin: 0 auto;;
			border-radius: 6px;
			background: rgba(255, 87, 51, 1);
			left: 199px;
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
}
</style>
